<%--
  Created by IntelliJ IDEA.
  Date: 2022/5/10
  Time: 21:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" +request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>宠物诊所系统</title>
    <link rel="shortcut icon"  href="${pageContext.request.contextPath}/favicon.ico" type="image/x-icon" />
</head>
<body>
<form action="${pageContext.request.contextPath}/login" method="post">
    <h2>登录宠物诊所系统</h2>
    <input id="username" name="username" type="text" placeholder="请输入账号">
    <input id="password" name="password" type="password" placeholder="请输入密码">
    <button id="login-btn" type="submit">登录</button>
</form>

<!--
    js引入方式：
    1、写在body标签里面，通过script包起来
    2、引入外部js文件  再通过script的src属性引入进来
-->

<script>
    window.onload=function (){
        var msg= "${msg}"
        console.log(msg)
        if (msg!=""){
            alert(msg)
        }
    }
    // let 定义一个变量
    let username = document.getElementById('username')
    let password = document.getElementById('password')
    let loginBtn = document.getElementById('login-btn')
    // js里面不允许出现 -

    //一般的交互事件
    // onclick 点击事件
    // onmousemove  鼠标移入事件
    // onmouseout  鼠标移出事件
    // ondblclick  双击事件
    // onfocus  input框获取焦点事件
    // onblur  失焦事件


    loginBtn.onclick = function() {
        let usernamevalue = username.value
        if (!usernamevalue) {
            return alert('请输入正确的用户名')
            //return 跳出当前函数，并且返回后面的值
        }

    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgb(235, 235, 235);
    }

    form {
        width: 400px;
        height: 320px;
        background-color: white;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */
    }

    h2 {
        margin-bottom: 20px;
        text-align: center;
    }

    form input {
        width: 100%;
        height: 30px;
        display: block;
        margin-bottom: 20px;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .mya {
        width: 100%;
        height: 30px;
        margin-bottom: 20px;
    }

    .mya a:nth-child(1) {
        float: left;
    }

    .mya a:nth-child(2) {
        float: right;
    }

    button {
        width: 100%;
        height: 40px;
        background-color: rgb(235, 235, 235);
        border: none;
    }

    button:active {
        box-shadow: 0 0 3px rgb(173, 172, 172);
        /* x偏移  y偏移  模糊值 颜色 */
    }
</style>
</body>
</html>
